<template>
  <div>
    <div class="container">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>酒店</el-breadcrumb-item>
        <el-breadcrumb-item>广州市酒店预订</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 城市筛选 -->
      <CitySearch :data="hotelList"/>
      <!-- 酒店筛选 -->
      <FilterHotel />
      <!-- 酒店item -->
      <HotelItem :data="item" v-for="item in hotelList" :key="item.id" />
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import CitySearch from '@/components/hotel/CitySearch'
import FilterHotel from '@/components/hotel/FilterHotel'
import HotelItem from '@/components/hotel/HotelItem'
export default {
  components: {
    CitySearch,
    FilterHotel,
    HotelItem
  },
  data() {
    return {
      cityName: '广州市',
      dialogVisible: false,
      hotelList: [],
      scenicList:[],
      total: 0,
      pageSize: 5,
      pageIndex: 0
    }
  },
  created() {
    this.getHotelList()
  },
  methods: {
    async getHotelList() {
      const { data: res } = await this.$axios.get('/hotels', {
        params: {
          city: 197,
          _limit: this.pageSize,
          _start: this.pageIndex
        }
      })
      this.total = res.total
      this.hotelList = res.data
      console.log(res.data)
    },
    open() {
      this.$alert(
        '<p><i class="el-icon-success" style="color:#67c23a;font-size:26px"></i>定位当前城市：广州市</p>',
        '提示',
        {
          dangerouslyUseHTMLString: true
        }
      )
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getHotelList()
    },
    handleCurrentChange(newPage) {
      this.pageIndex = newPage
      this.getHotelList()
    }
  },
  watch: {
    $route: {
      handler: function() {
        if (!this.$route.query.cityName) {
          this.$router.replace('/hotel?cityName=广州市')
          this.open()
        }
      },
      immediate: true
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  min-width: 1000px;
  width: 1000px;
  // height: 1000px;
  // background: brown;
  margin: 0 auto;
  padding: 20px 0;
}
</style>